
var win = null;
var cvs = null;
var ctx = null;
var timer = null;
var R = 100;
var CX = 0;
var CY = 0;
var darkColor = '#333';
var shadowColor = '#999';
var lastSecend = 0;


function main (evt) {
    win = window;
    cvs = document.getElementById('canvas');
    ctx = cvs.getContext('2d');
    if (!ctx) {
        return;
    }
    cvs.width = win.innerWidth;
    cvs.height = win.innerHeight;
    CX = win.innerWidth / 2;
    CY = win.innerHeight / 2;
    
    // render();

    var timer = setInterval(function () {
        render();
    }, 500);
}


function render () {
    ctx.clearRect(0, 0, cvs.width, cvs.height);

    // 绘制外圈
    ctx.save();
    ctx.beginPath();
    ctx.arc(CX, CY, R + 20, 0, 2 * Math.PI);
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 20;
    ctx.fillStyle = darkColor;
    ctx.fill();
    ctx.restore();

    ctx.save();
    ctx.beginPath();
    ctx.arc(CX, CY, R + 3, 0, 2 * Math.PI);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.restore();

    // 绘制秒刻度
    var secondRadian = 360 / 60 * Math.PI / 180;
    ctx.save();
    ctx.beginPath();
    for (var i = 0; i < 60; i++) {
        ctx.moveTo(CX, CY);
        ctx.arc(CX, CY, R, secondRadian * i, secondRadian * (i + 1));
    }
    ctx.closePath();
    ctx.strokeStyle = '#666';
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(CX, CY, R * 0.95, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.restore();

    // 绘制分刻度
    ctx.beginPath();
    ctx.save();
    var minuteRadian = 360 / 12 * Math.PI / 180;
    for (var i = 0; i < 12; i++) {
        ctx.moveTo(CX, CY);
        ctx.arc(CX, CY, R, minuteRadian * i, minuteRadian * (i + 1));
    }
    ctx.closePath();
    ctx.lineWidth = 3;
    ctx.strokeStyle = darkColor;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(CX, CY, R * 0.9, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.restore();

    
    var time = new Date();
    // 绘制时针
    var hour = (time.getHours() * 30 + 30 * time.getMinutes() / 60 - 90) * Math.PI / 180;
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 15;
    ctx.lineCap = 'round';
    ctx.moveTo(CX, CY);
    ctx.arc(CX, CY, R * 0.5, hour, hour);
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    ctx.shadowBlur = 6;
    ctx.strokeStyle = darkColor;
    ctx.stroke();
    ctx.restore();

    // 绘制分针
    var minute = (time.getMinutes() * 6 + 6 * time.getSeconds() / 60 - 90) * Math.PI / 180;
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.moveTo(CX, CY);
    ctx.arc(CX, CY, R * 0.85, minute, minute);
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = 4;
    ctx.shadowOffsetY = 4;
    ctx.shadowBlur = 8;
    ctx.strokeStyle = darkColor;
    ctx.stroke();
    ctx.restore();
    
    // 绘制秒针
    var second = time.getSeconds();
    if (second == lastSecend) {
        second += 0.5;
    } else {
        lastSecend = second;
    }
    console.log(time.getSeconds(), second);
    second = (second * 6 - 90) * Math.PI / 180;
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.moveTo(CX, CY);
    ctx.arc(CX, CY, R * 0.75, second, second);
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 10;
    ctx.strokeStyle = '#ff0000';
    ctx.stroke();
    ctx.restore();

    // 绘制圆心
    ctx.save();
    ctx.beginPath();
    ctx.arc(CX, CY, 15, 0, 2 * Math.PI);
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    ctx.shadowBlur = 10;
    ctx.fillStyle = darkColor;
    ctx.fill();
    ctx.restore();

    // tx.fillText(CX, CY + 100, 'iburning.com');
}


window.addEventListener('load', main);